<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>S&TV-KIDS</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.png" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="framework/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/page_event.js"></script><script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/spin.js"></script>
<script language="javascript">
<!--
	var page = 1;
	var total = 0;
	var json_url = "";
	//var cate_no = Request('cate_no');
	//var cate_nm = Request('cate_nm');
	var $list;
	var blist = true;
	var pl_id;


	$(window).scroll(function()
	{
		// Android more
		if($(window).scrollTop() == $(document).height() - $(window).height())
		{
			if(page > 1 && page <= total)
			{
				if(blist)
				{
					$("#load").show();
					More();
				}
			}
		}	
	});
	

	function More()
	{
		var response = "";
		blist = false;
		$list = $("#list");

		$.getJSON(json_url + "&start-index=" + page, function(data)
		{
			total = parseInt(data.data.totalItems);
			
			if(page == 1)
				$("#title").html(data.data.title);
				
			if(page <= total)
			{
				$.each(data.data.items, function(i, item) 
				{
					if(page == 1 && i < 1)
						dnclass = "btn_down on";
					else
						dnclass = "btn_down";
						
					if(!item.video.status)
					{
						response += '<li>';
						response += '<a href="http://www.youtube.com/watch?v=' + item.video.id + '">';
						response += '<dl>';
						response += '<dt>' + item.video.title + '</dt>';
						response += '<dd class="img_area" style="background:url(' + item.video.thumbnail.sqDefault + ') center center no-repeat">';
						//response += '<span>' + time(item.video.duration) + '</span>';
						response += '</dd>';
						response += '<dd class="info_area">';
						response += '<strong>view</strong> <span>' + formatCurrency(item.video.viewCount) + "</span><br>";
						response += '<strong>like</strong> <span>' + formatCurrency(item.video.likeCount) + "</span>";
						//response += '<span class="reply"> ' + formatCurrency(item.video.commentCount) + "</span>";
						response += '</dd>';
						response += '</dl>';
						response += '</a>';
						response += '<button type="button" onclick="javascript:Download(this);" id="' + item.video.id + '" class="' + dnclass + '">down</button>';
						response += '</li>';										
					}
						
        		});
        	}
							
			if(response == "")
				$("#loading").hide();
			else
			{
				$(response).appendTo($list);
				blist = true;
			}
				
			Downloads();
			$("#load").hide();	
			
			page += 15;
			
			if(page > total)
				$("#loading").hide();
		});
	}
	
	function Download(obj)
	{
		var classnm = obj.className;
		//var arrdn = localDatabase('get', 'down_kidstube');

		if(classnm.indexOf("btn_down on") != -1)
		{
			window.location.href = "http://kidstube.kr/play.php?v=" + obj.id;
		}
		else
		{
			/*
			if(arrdn)
				arrdn.push(obj.id);
			else
				arrdn = [obj.id];
			
			localDatabase('set', 'down_kidstube', arrdn);
			obj.className = "btn_down on";
			*/
			window.location.href = "http://kidstube.kr/download.php?v=" + obj.id;
		}
	}
	
	// Download checked
	function Downloads()
	{
		/*
		var arrdn = localDatabase('get', 'down_kidstube');

		if(arrdn)
		{
			for(i=0; i<arrdn.length; i++)
			{
				$("#" + arrdn[i]).addClass("btn_down on");
			}
		}
		*/
	}
	
	function Load(id)
	{
		pl_id = id;
		json_url = "http://gdata.youtube.com/feeds/api/playlists/" + id + "?v=2&alt=jsonc&max-results=15";
		More();
	}
	
	function PlayAll()
	{
		window.location.href = "http://kidstube.kr/all.php?pl=" + pl_id;
	}
-->
</script>
<style>
	
</style>
</head>
<body id="category_sub">
	<header>
		<h1>CATEGORY</h1>
		<div class="bg_animal"></div>
		<div class="bg_cloud"></div>
		<div class="bg_cloud2"></div>
		<div class="bg_cloud3"></div>
	</header>
	<div class="title_section">
		<h2 id="title"></h2>
		<button type="button" class="play_all" onclick="javascript:PlayAll();">play all</button>
	</div>
	<div class="list_section">
		<ul class="list" id="list"></ul>
		<div id="loading">
			<div id="load" style="display:none;"></div>
		</div>
	</div>
</body>
</html>
<script>
	var opts = {
	  lines: 8, // The number of lines to draw
	  length: 4, // The length of each line
	  width: 3, // The line thickness
	  radius: 6, // The radius of the inner circle
	  color: '#000', // #rgb or #rrggbb
	  speed: 1, // Rounds per second
	  trail: 54, // Afterglow percentage
	  shadow: false // Whether to render a shadow
	};
	var target = document.getElementById('load');
	var spinner = new Spinner(opts).spin(target);
</script>